<template>
  <div class="hompage" id="map">
    <div class="btn-box">
      <button class="clear" @click="claer()">清除图层</button>
      <button class="showpoint" @click="showpoint()">显示geom点</button>
      <button class="showpoint" @click="showline()">显示geom线</button>
      <button class="showpoint" @click="showMultiPolygon()">
        显示geom多面
      </button>
      <button class="wfsPoint" @click="wfspoint()">显示wfs点</button>
      <button class="wfsline" @click="wfsline()">显示wfs线</button>
      <button class="wfsPolygon" @click="wfsPolygon()">显示wfs面</button>
      <button class="wms" @click="wmslayer()">显示wms图层</button>
      <button @click="insertLabel($event)">绘制点</button>
      <button @click="measurDistance($event,'Length')">绘制线</button>
      <button @click="measurDistance($event,'Area')">绘制面</button>
    </div>
    <OlMap @mapClick="mapClick" ref="dialog" @updatemap="updatemap"></OlMap>
  </div>
</template>

<script setup>
import OlMap from "@/components/map/olMap.vue";
import { onMounted, ref } from "vue";
import svgimg from "@/assets/mapimg/point/mission-point.png";
import KspMap from "@/components/map/utils/kspmap";
import $ from "jquery";
import MapUtils from "@/components/map/utils/map-utils";
import { Circle as CircleStyle } from 'ol/style'
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";

let KspMapclass;
let Utils = new MapUtils();
let dialog = ref();
let updateMap = null;
// 线图层
onMounted(() => { });
function updatemap(map) {
  if (map) {
    updateMap = map;
    KspMapclass = new KspMap(updateMap);
    KspMapclass.addMapEvent('singleclick', move)
  }
}
function move(params) {
  // console.log(params)
}
function mapClick(evt) {
  console.log(evt);
}
// 点图层
let pointlist = {
  styles: {
    img: {
      url: svgimg,
      size: [56, 56],
    },
  },
  id: "linepoin",
  name: "起点图层",
  data: [],
  zIndex: 14,
  overlay: true,
};
function showpoint() {
  let geom = "SRID=4326;POINT(116.14039252200004 24.644223239000002)"; //模拟请求下来的点的数据
  let position = Utils.getWkts([geom])[0];
  pointlist.data = [
    {
      id: 1,
      type: "类型",
      geometry: {
        type: "point",
        geom: geom, //
      },
      styles: pointlist.styles,
    },
  ];
  pointlist.data.forEach((ele, i) => {
    let featureJson = JSON.stringify(ele);
    let top = getTopJQElement("名称", featureJson);
    ele.overlays = [
      {
        id: pointlist.id + i,
        position: position,
        positioning: "center-center",
        element: top[0],
        offset: [-10, -30],
        stopEvent: true,
      },
    ];
  });
  // 线上面的坐标点
  if (pointlist.data.length) {
    KspMapclass.createVectorLayer(pointlist);
  }
}

/**
 * 实时信息的头部上浮框
 * @param content 内容
 */
function getTopJQElement(content, dataSet) {
  if (dataSet) {
    let str = dataSet.replace(/"/g, "&quot;");
    return $(
      `<div class="ol-popup-ripple" data-feature="${str}">
      <p data-feature="${str}">${content}</p>
    </div>
    `
    );
  }
  return $(
    `<div class="ol-popup-ripple">
    <p>${content}</p>
  </div>
  `
  );
}

let linelayer = {
  type: "DEFAULT_MEASURE_STYLE",
  id: "linelayer",
  name: "线的图层",
  data: [],
  styles: {
    fill: "rgba(255,255,255,0.5)",
    stroke: {
      color: "#f86219",
      width: 2,
    },
    text: {
      text: "未巡护/少巡护",
      font: "14px Calibri,sans-serif",
      fill: "#1E90FF",
      stroke: {
        color: "#fff",
        width: 2,
      },
    },
  },
  zIndex: 10,
};

/**
 * 显示线
 */
function showline() {
  const geom =
    "SRID=4326;MULTILINESTRING((116.23226165771484 24.505971805180423,116.19174957275389 24.50909572204189,116.15964889526366 24.493787787594783,116.158361 24.4939))"; //模拟请求下来的点的数据
  linelayer.data = [
    {
      data: {},
      id: "id",
      type: "Feature",
      geometry: {
        type: "LineString",
        geom: geom,
      },
    },
  ];
  if (linelayer.data.length) {
    KspMapclass.createVectorLayer(linelayer);
  }
}
let MultiPolygonConfig = {
  id: "MultiPolygon1",
  type: "GEODATA_INDUSTRY",
  name: "面的图层",
  data: [],
  styles: {
    fill: "rgba(255,255,255,0.5)",
    stroke: {
      color: "#f86219",
      width: 2,
    },
    text: {
      text: "未巡护/少巡护",
      font: "14px Calibri,sans-serif",
      fill: "#1E90FF",
      stroke: {
        color: "#fff",
        width: 2,
      },
    },
  },
  zIndex: 14,
};
/**
 * 显示多级面
 */
function showMultiPolygon() {
  let geom =
    "SRID=4326;MULTIPOLYGON(((116.35656595230103 24.80091093855097,116.35862588882448 24.793430911980323,116.36583566665651 24.795300960918425,116.36549234390259 24.800599279785004,116.35656595230103 24.80091093855097)),((116.36805117130277 24.82035275715903,116.34916841983794 24.818093567761295,116.34444773197174 24.80562833396344,116.39311373233792 24.805939980087786,116.3716560602188 24.821131778433383,116.36805117130277 24.82035275715903)))";
  MultiPolygonConfig.data = [
    {
      data: {
        type: "type类型点击", // 管护区域弹窗
        id: "面id",
        name: "未巡护/少巡护",
        title: "未巡护/少巡护",
      },
      title: `未巡护/少巡护`,
      name: "未巡护/少巡护",
      id: "cover",
      geometry: {
        type: "MultiPolygon",
        geom: geom,
      },
    },
  ];
  if (MultiPolygonConfig.data.length) {
    KspMapclass.createVectorLayer(MultiPolygonConfig);
  }
}

//

/**
 * 请求图层wfs
 */
function wfspoint() {
  let url =
    "/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&outputFormat=application/json&srsname=EPSG:4326&typeNames=jiaoling:t_fire_point&cql_filter=forestleaderno%20like%20%27441427%25%27%20and%20isdel=0";
  let styles = {
    img: {
      url: svgimg,
      size: [56, 56],
    },
    text: {
      text: "未巡护/少巡护",
      font: "14px Calibri,sans-serif",
      fill: "#1E90FF",
      stroke: {
        color: "#fff",
        width: 2,
      },
      placement: "point",
      backgroundFill: "rgba(7,22,46,0.5)",
      textAlign: "center",
      offsetX: -5,
      offsetY: 20,
    },
    zIndex: 14,
  };
  KspMapclass.createwfsLayer("t_fire_point", url, styles);
}
function wfsline() {
  let url =
    "/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&outputFormat=application/json&srsname=EPSG:4326&typeNames=jiaoling:t_fire_proof_road&cql_filter=forestleaderno%20like%20%27441427%25%27%20and%20isdel=0";
  let styles = {
    fill: "rgba(255,255,255,0.5)",
    stroke: {
      color: "#f86219",
      width: 2,
    },
    text: {
      text: "未巡护/少巡护",
      font: "14px Calibri,sans-serif",
      fill: "#1E90FF",
      stroke: {
        color: "#fff",
        width: 2,
      },
    },
    zIndex: 13,
  };
  KspMapclass.createwfsLayer("wfsline", url, styles);
}

// 查询行政区划线
function wfsPolygon() {
  let url = "/api/areas_v3/bound/geojson?code=440000_full";
  let styles = {
    fill: "rgba(255,255,255,0.5)",
    stroke: {
      color: "#f86219",
      width: 2,
    },
    text: {
      text: "未巡护/少巡护",
      font: "14px Calibri,sans-serif",
      fill: "#1E90FF",
      stroke: {
        color: "#fff",
        width: 2,
      },
    },
    zIndex: 11,
  };

  KspMapclass.createwfsLayer("areas_v3", url, styles);
}

function wmslayer() {
  let params = {
    LAYERS: "guangdong",
    resolutions: [
      0.00951784402332112, 0.007138383017490841, 0.00475892201166056,
      0.00237946100583028, 0.00118973050291514, 5.9486525145757e-4,
    ],
    url: "/geowebcache/geowebcache/service/wms",
    zIndex: 9,
  };
  KspMapclass.createwmsLayer("guangdong", params);
}

/**
 * 清除图层
 */
function claer() {
  KspMapclass.removeVectorLayer(pointlist.id, true);
  KspMapclass.removeVectorLayer(linelayer.id);
  KspMapclass.removeVectorLayer(MultiPolygonConfig.id);
  KspMapclass.removeVectorLayer("areas_v3");
  KspMapclass.removeVectorLayer("t_fire_point");
  KspMapclass.removeVectorLayer("wfsline");
  KspMapclass.removeVectorLayer("guangdong");
  KspMapclass.deleteAllDrawFeature()
}

// 插入标签
function insertLabel(event) {
  // this.msg.info('请在地图上选点标注')
  console.log('请在地图上选点')
  event.stopPropagation()
  KspMapclass.deleteAllDrawFeature()
  KspMapclass.drawMarkerFeature(
    (e) => {
      console.log(e)
      //  Utils.setMapCenter(e.position)
      //   this.forestfierpopOverlayer.setPosition(e.position)
      //   let geom = 'SRID=4326;' + e.wkt
      //   this.forestfierpop.setData(
      //     this.formdataAll.patrolInspectionPointList,
      //     geom,
      //     0
      //   )
      //   this.kspMap.setMapCenter(e.position)
    }, null
  )
}

/**
  *
  * @param event
  * @param type 1是手动规划 2是测距 3线标注
  */
function measurDistance(event, type) {
  // this.mapUtils.deleteEditableCircle()
  let param = {}
  param = {
      helpMsg: '单击选中下一点,</br>双击完成规划 路径',
      isModifystyle: false,
      style: {
        image: new CircleStyle({
          radius: 6,
          stroke: new Stroke({
            color: 'red',
            width: 2,
          }),
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.9)',
          }),
        }),
        fill: new Fill({
          color: '#f56a19',
        }),
        stroke: new Stroke({
          color: '#f56a19',
          width: 2,
        }),
      }
    }
  KspMapclass.startMeasure(type, param, (data) => {
    if (type == 1) {
      // this.programming(data)
    }
  })
}






</script>

<style scoped>
.hompage {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
}

#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.point {
  position: absolute;
  top: 10px;
  left: 10px;
}

.btn-box {
  position: absolute;
  top: 20px;
  left: 100px;
  z-index: 999;
}

.btn-box button {
  margin-right: 10px;
}

.clear {
  z-index: 999;
}
</style>
